<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
</head>

<body>
	<canvas id="canvas" width="400" height="400"></canvas>
	<script>
		const canvas = document.querySelector("canvas");
		const ctx = canvas.getContext("2d");
		
		const img = new Image();
		img.onload = function () {
			canvas.width = img.width;
			canvas.height = img.height;
			ctx.drawImage(img, 0, 0);
			showArrow(ctx);
		};

		img.src = "./imgs/demo.png";
		function showArrow(ctx) {
			drawArrowLine(10, 20, 10, 100,`鼻翼宽度`,'3.82');
			drawArrowLine(60, 150, 60, 70,'鼻翼宽度','3.82');
			drawArrowLine(50, 200, 300, 200,'鼻翼宽度','3.82');
			drawArrowLine(300, 240, 50, 240,'鼻翼宽度','3.82');
			//带点线的箭头
			function drawArrowLine(x1, y1, x2, y2,...text) {
				if (x1 > x2 || y1 > y2) {
					var [x1, x2, y1, y2] = [x2, x1, y2, y1];
				}
				
				var startPoint, endPoint;
				var space = 5; //点点间距5
				// 不是横线就是竖线
				if (y1 === y2) {
					drawArrow(x1, y1, x1 + space, y1 - 2, x1 + space, y1 + 2);
					drawArrow(x2, y2, x2 - space, y2 - 2, x2 - space, y2 + 2);
					startPoint = [x1 + space, y1];
					endPoint = [x2 - 2 * space, y2];
					while (Math.abs(startPoint[0] - endPoint[0]) >= 1) {
						startPoint[0] =
							startPoint[0] < endPoint[0]
								? startPoint[0] + 1
								: startPoint[0] - 1;
						if (Math.abs(startPoint[0] - endPoint[0]) % space === 0) {
							drawDot(...startPoint);
						}
					}
				}
				if (x1 === x2) {
					drawArrow(x1, y1, x1 + 2, y1 + space, x1 - 2, y1 + space);
					drawArrow(x2, y2, x2 + 2, y2 - space, x2 - 2, y2 - space);
					startPoint = [x1, y1 + space];
					endPoint = [x2, y2 - 2 * space];

					while (Math.abs(startPoint[1] - endPoint[1]) >= 1) {
						startPoint[1] =
							startPoint[1] < endPoint[1]
								? startPoint[1] + 1
								: startPoint[1] - 1;
						if (Math.abs(startPoint[1] - endPoint[1]) % space === 0) {
							drawDot(...startPoint);
						}
					}
				}
				ctx.font="10px";
				if(x1===x2) {
					text.forEach((item,index)=>{
						ctx.fillText(item,(x2+x1)/2+4,(y1+y2)/2+12*index);
					})
					
				}
				if(y1===y2) {
					text.forEach((item,index)=>{
						ctx.fillText(item,(x2+x1)/2-ctx.measureText(item).width/2,(y1+y2)/2+12+12*index);
					})
					
				}
				
			}
			//箭头
			function drawArrow(x1, y1, x2, y2, x3, y3) {
				ctx.beginPath();
				ctx.moveTo(x1, y1);
				ctx.lineTo(x2, y2);
				ctx.lineTo(x3, y3);
				ctx.closePath();
				ctx.fillStyle = "rgba(255,255,255,1)";
				ctx.fill();
			}
			//点
			function drawDot(x1, y1, r) {
				ctx.beginPath(); //不写会和线连起来
				ctx.fillStyle = "rgba(255,255,255,1)";
				//绘制成矩形
				ctx.arc(x1, y1, r ? r : 1, 0, 2 * Math.PI);
				ctx.fill();
				ctx.closePath();
			}
		}
	</script>
</body>

</html>